
var canvas=document.getElementById("game");
var healthNode=document.getElementById("health");
var powerNode=document.getElementById("power");
var killNode=document.getElementById("kill");
var diedNode=document.getElementById("died");
var rankingNode=document.getElementById("ranking");
var msgNode=document.getElementById("msg");


if(innerHeight<innerWidth){
    canvas.width=canvas.height=innerHeight*.9;
}else{
    canvas.width=canvas.height=innerWidth*.9;
}
showUI();

var timesX=canvas.width/1000;
var timesY=canvas.height/1000;
var cxt=canvas.getContext("2d");
var lastTime=Date.now();
var deltaTime=0;


var MyKeyDownW=false;
var MyKeyDownS=false;
var MyKeyDownA=false;
var MyKeyDownD=false;
var SpeedUp=false;


var personImgs=[];
var persons=[];
var walls=[];
var bullets=[];
var healthPlace=[];
var powerPlace=[];
var bangs=[];
var bangImg;

var I;
var info;
var Myimg;
var MyImgCode=Math.floor(Math.random()*6)*2+2;
var MyCode=MyImgCode;
var keyDown=false;
var speedUp=false;
var loseTime=0;
var once=0;
var MyAngle=0;
var BigShoot=false;
var shoot=false;
var shootStartTime=0;
var resetTime=0;
var revivalAble=false;

var showRankingTime=Date.now();

var webSocket;
var isConnection=false;
var sendAble=false;

function start(){
    document.body.onkeydown=function(e){
        var k=e.keyCode;
        if(k==87){
            MyKeyDownW=true;
        }else if(k==83){
            MyKeyDownS=true;
        }else if(k==65){
            MyKeyDownA=true;
        }else if(k==68){
            MyKeyDownD=true;
        }else if(k==16){
            SpeedUp=true;
        }else if(k==32){
            e.preventDefault();
            MakeWall();
        }
    };
    document.body.onkeyup=function(e){
        var k=e.keyCode;
        if(k==87){
            MyKeyDownW=false;
        }else if(k==83){
            MyKeyDownS=false;
        }else if(k==65){
            MyKeyDownA=false;
        }else if(k==68){
            MyKeyDownD=false;
        }else if(k==16){
            SpeedUp=false;
        }else if(k==32){
            if(!shoot&&!BigShoot)return;
            sendMsg(4,{});
            BigShoot=false;
        }
    };
    init();
    run();
}

function init(){
    bangImg=new testImg("src/bang.png",21,1);
    loadImg();
    info=new Info();
    I=new person();
    I.id=Name;
    connection("ws://"+location.host+"/service");
    canvas.onmousedown=mouseDown;
    document.onmouseup=function(){
        if(!shoot&&!BigShoot)return;
        shoot=false;
    };
    canvas.onmousemove=function(e){
        e.preventDefault();
        var MP=MPoint(e);
        MyAngle=getAngle(I.point,MP);
        toFace(MyAngle);
    };
    document.oncontextmenu=function () {
        return false;
    };
    canvas.onresize=function(){
        console.log(213)
    };
    Myimg=personImgs[MyImgCode];
}

function mouseDown(e) {
    e.preventDefault();
    if(MyImgCode<2)return;
    Shoot(e);
}

function run(){
    requestAnimationFrame(run);
    var now=Date.now();
    deltaTime=now-lastTime;
    lastTime=now;
    //console.log(deltaTime);
    if (!isConnection)return;
    cxt.save();
    cxt.scale(timesX,timesY);
    cxt.clearRect(0,0,1000,1000);
    drawPlace.call(healthPlace,100,230,100,.8);
    drawPlace.call(powerPlace,100,100,230,.8);
    drawBullet();
    var Ps=toArray(persons);
    drawAllPerson(Ps);
    drawWalls();
    drawAllBangs();
    showRanking(Ps,now);
    drawMySign();
    drawInfo();
    revival();
    play();
    if(sendAble){
        sendAble=false;
        sendMsg(1,I);
        if(BigShoot){
            sendMsg(5,MyAngle);
        }
    }
    drawRestart(resetTime);
    cxt.restore();
}

function play() {
    if (shoot||BigShoot)return;
    if(I.imgCode<2)return;
    keyDown=true;
    if(MyKeyDownS&&!MyKeyDownW&&!MyKeyDownA&&!MyKeyDownD){
        I.face=0;
    }else if(MyKeyDownA&&!MyKeyDownD&&!MyKeyDownS&&!MyKeyDownW){
        I.face=1;
    }else if(MyKeyDownD&&!MyKeyDownA&&!MyKeyDownS&&!MyKeyDownW){
        I.face=2;
    }else if(MyKeyDownW&&!MyKeyDownS&&!MyKeyDownD&&!MyKeyDownA){
        I.face=3;
    }else if(MyKeyDownA&&MyKeyDownS&&!MyKeyDownW&&!MyKeyDownD){
        I.face=4;
    }else if(MyKeyDownS&&MyKeyDownD&&!MyKeyDownW&&!MyKeyDownA){
        I.face=5;
    }else if(MyKeyDownA&&MyKeyDownW&&!MyKeyDownS&&!MyKeyDownD){
        I.face=6;
    }else if(MyKeyDownW&&MyKeyDownD&&!MyKeyDownS&&!MyKeyDownA){
        I.face=7;
    }else {
        keyDown=false;
    }
    if(SpeedUp){
        speedUp=true;
    }else {
        speedUp=false;
    }
    control.call(I);
}

function drawAllPerson(Ps){
    Ps.sort(function (a, b) {
       return a.point.y-b.point.y;
    });
    for(var i=0 ;i<Ps.length;++i){
        var temp=Ps[i];
        if(temp.id==I.id){
            info=temp.info;
        }
        draw.call(temp);
        drawName.call(temp);
    }
}

function drawAllBangs(){
    for(let i in bangs){
        drawBang.call(bangs[i],i);
    }
}

function toArray(object) {
    var arr=[];
    for(var i in object){
        arr.push(object[i]);
    }
    return arr;
}

function showRanking(players,now){
    //console.log(players.length)
    if(now-showRankingTime<100)return;
    showRankingTime=now;
    players.sort(function(a,b){
        return b.info.kill- a.info.kill;
    });
    //var rs=rankingNode.childNodes;
    //for(var i=0;i<rs.length;++i){
    //    rankingNode.removeChild(rs[i]);
    //}
    rankingNode.innerHTML="";
    for(var j=0;j<players.length;++j){
        var temp=players[j];
        var rank=document.createElement("div");
        var text=document.createTextNode(temp.id+"：杀："+temp.info.kill+",死："+temp.info.diedTimes);
        //console.log(rank);
        rank.appendChild(text);
        //console.log(rank);
        rankingNode.appendChild(rank);
    }
}

function showUI(){
    //console.log(canvas.offsetLeft,canvas.offsetTop,canvas.width);
    //console.log(rankingNode.left,msgNode.left,canvas.offsetLeft,canvas.width);
    rankingNode.style.left=canvas.offsetLeft+canvas.width+"px";
    rankingNode.style.width=canvas.offsetLeft+"px";
    rankingNode.style.top=canvas.offsetTop+"px";
    msgNode.style.left=0;
    msgNode.style.width=canvas.offsetLeft+"px";
    msgNode.style.top=canvas.offsetTop+"px";
}